<template>
  <el-dialog :close-on-click-modal="false"  class="mapDialog" ref="dialogform" title="地图" :visible.sync="dialogVisible" width="90%"
    :before-close="handleClose" append-to-body>
    <div class="MapContainer">
      <MapContainer :latLngList="latLngList" v-if="dialogVisible" :isSingle="false" @currentPolygon="currentPolygon">
      </MapContainer>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>

import MapContainer from '@/components/MapContainer';
export default {
  components: { MapContainer },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    latLngList: {
      type: Array,
      default: () => {
        return []
      }
    },
    dialogVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      list: [],
      copyList: []
    }
  },
  computed: {

  },
  watch: {
    dialogVisible(v) {
      v && (this.copyList = JSON.parse(JSON.stringify(this.latLngList)))
    },
  },
  
  mounted() { },
  methods: {
    currentPolygon(list = []) {
      this.list = list
    },
    saveData() {
      console.log(this.list)
      this.$emit('currentPolygon', this.list)
      this.$emit("closeDialog")
    },
    //取消关闭
    cancel() {
      this.list = []
      this.$emit('currentPolygon', this.copyList)
      this.$emit("closeDialog")
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => { this.cancel() })
        .catch(_ => { });
    }
  }
};
</script>
<style lang="scss" scoped>
.MapContainer {
  width: 100%;
  height: 70vh;
}

::v-deep .el-dialog {
  margin-top: 5vh !important;
}
</style>
